<template>
  <div>
    <el-row gutter="10" style="margin-top: 10px;">
      <el-col span="20" offset="2">
        <el-row>
          <div>
            <p id="niceperson" style="font-weight: bold; font-size: 20px;" align="center">全体员工</p>
            <el-divider></el-divider>
          </div>
        </el-row>
        <el-row>
          <el-col style="margin: 10px 0" span="4" v-for="item in niceperson" :key="item.username">
            <el-card class="employee-card">
              <img :src="item.picImgeRul" width="100%" class="pic" alt="员工照片">
              <br>
              <br>
              <span style="font-weight: bold">{{item.username}}</span>
<!--              <p>我是员工</p>-->
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TokenAxios from "@/http/TokenAxios";
import BaseUrl from "@/http/BaseUrl";

export default {
  data() {
    return {
      niceperson: []
    };
  },
  methods: {
    List() {
      debugger
      TokenAxios.get(BaseUrl.STAFF_USER+'/staffs')
          .then((response) => {
            debugger
            let jsonResult = response.data;
            debugger
            if (jsonResult.state === 20000) {
              this.niceperson = jsonResult.data;
            }
          })
          .catch((error) => {
            console.error(error);
          });
    }
  },
  mounted() {
    this.List();
  }
}
</script>

<style scoped>
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-family: PingFang SC, Microsoft Yahei, Helvetica Neue, Arial;
}

a {
  text-decoration: none;
}

.employee-card {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
  margin: 0 10px; /* 添加左右间距 */
}

.employee-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pic {
  border-radius: 5px;
  transition-duration: 0.3s;
}

.pic:hover {
  transform: scale(1.1);
}
</style>
